
<template>
  <div>
    <div id="top-status-bar">
      <span class="time" style="float: left">{{time}}</span>
      <img src="@/assets/电 90%.png"
           style="float: right; width: 30px; height: 30px; margin-top: -6px; margin-right: 15px;">
      <img src="@/assets/280-手机网络.png"
           style="float: right; width: 19px; height: 19px; margin-top: -1px; margin-right: 6px;">
      <img src="@/assets/手机信号.png"
           style="float: right; width: 15px; height: 15px; margin-top: 1px; margin-right: 13px;">
    </div>
    <div id="top">
      <van-image id="img"
          round
          width="5rem"
          height="5rem"
          v-bind:src= form.driverImgurl
      />
      <div id="name">
        <div id="name1">{{ form.driverName }}</div>
        <div id="name2">里程</div> <div id="name3">0/100</div>
        <el-progress id="progress" :percentage="0" :format="format"></el-progress>
      </div>
    </div>
    <div id="bottom">
      <div id="bottom_top">
        <p id="bottom_top_name1">资产总额（元）</p>
        <p id="bottom_top_name2">{{ form.driverTotalAssets }}</p>
        <div id="bottom_top_name3" @click="goLicheng">
          <p id="spend">当月收入（元）</p>
          <p id="money">{{ form.driverMonthIncome }}</p>
        </div>
        <div id="bottom_top_name4" @click="gowithdrawalRecord">
          <p id="spend">当月提现（元）</p>
          <p id="money" v-if="form.currentMonth!=null">{{ form.currentMonth }}</p>
          <p id="money" v-if="form.currentMonth ==null">0</p>
        </div>
        <div id="bottom_top_name5" @click="gowithdrawCash">提现</div>
      </div>
      <div id="bottom_bottom">
        <div style="width: 115px; float: left; margin-top: 13px; border-right: 2px solid #DCDCDC;height: 70px;" @click="NotOpened">
          <img src="@/assets/常用地址图片.png"
               style=" width: 45px; height: 45px; float: left; margin: 0 0 0 35px">
          <p style="font-weight:bold;font-size : 12pt; float: left; margin: 13px 0 0 20px">常用地址</p>
        </div>
        <div style="width: 115px; float: left; margin-top: 13px;border-right: 2px solid #DCDCDC;height: 70px;">
          <img src="@/assets/设置密码图片.png"
               style=" width: 45px; height: 45px; float: left; margin: 0 0 0 35px" @click="NotOpened">
          <p style="font-weight:bold;font-size : 12pt; float: left; margin: 13px 0 0 20px">设置密码</p>
        </div>
        <div style="width: 115px; float: left; margin-top: 13px;height: 70px;">
          <img src="@/assets/修改手机号图片.png"
               style="width: 45px; height: 45px; float: left; margin: 0 0 0 35px" @click="NotOpened">
          <p style="font-weight:bold;font-size : 12pt; float: left; margin: 13px 0 0 20px">修改手机号</p>
        </div>
      </div>
      <div id="bottom_xia">
        <div style="width: 100%; height: 60px; border-bottom: 2px dotted #DFDFDF" @click="goLicheng">
          <img src="@/assets/运营统计图片.png"
               style="width: 38px; height: 38px; float: left; margin: 12px 0 0 60px">
          <p style="font-weight: bolder;font-size : 12pt; float: left; margin: 19px 0 0 20px">运营统计</p>
          <img src="@/assets/向右箭头.png"
               style="float: right; width: 30px; height: 38px;margin: 10px 40px 0 0">
        </div>
        <div style="width: 100%; height: 60px; border-bottom: 2px dotted #DFDFDF" @click="goUserGuide">
          <img src="@/assets/用户指南图片.png"
               style="width: 38px; height: 38px; float: left; margin: 12px 0 0 60px">
          <p style="font-weight: bolder;font-size : 12pt; float: left; margin: 19px 0 0 20px">用户指南</p>
          <img src="@/assets/向右箭头.png"
               style="float: right; width: 30px; height: 38px;margin: 10px 40px 0 0">
        </div>
        <div style="width: 100%; height: 60px; border-bottom: 2px dotted #DFDFDF" @click="goSettingsPage">
          <img src="@/assets/设置图片.png"
               style="width: 38px; height: 38px; float: left; margin: 12px 0 0 60px">
          <p style="font-weight: bolder;font-size : 12pt; float: left; margin: 19px 0 0 20px">设置</p>
          <img src="@/assets/向右箭头.png"
               style="float: right; width: 30px; height: 38px;margin: 10px 40px 0 0">
        </div>
        <div style="width: 100%; height: 60px "  @click="goAboutPage">
          <img src="@/assets/关于图片.png"
               style="width: 38px; height: 38px; float: left; margin: 12px 0 0 60px">
          <p style="font-weight: bolder;font-size : 12pt; float: left; margin: 19px 0 0 20px">关于</p>
          <img src="@/assets/向右箭头.png"
               style="float: right; width: 30px; height: 38px;margin: 10px 40px 0 0">
        </div>
      </div>

    </div>

    <Tabbar/>

  </div>
</template>

<script>
import Tabbar from "@/components/Tabbar.vue";
import {userPersonalUser} from "@/components/api/user/user";
import Vue from 'vue';
import {Tab, Tabs} from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
export default {
  components: {
    Tabbar,
  },
  data() {
    return {
      time: '',
      form: {},
    };
  },
  methods: {
    NotOpened(){
      this.$message({
        message: '该功能尚未开放',
        type: 'warning',
        duration: 800
      })
    },
    format(percentage) {
      return percentage === 100 ? ' ' : ` `;
    },
    updateTime() {
      setInterval(() => {
        const now = new Date();
        const timeString = now.toLocaleTimeString();
        this.time = timeString;
      }, 1000);
    },
    // 模拟信号、网络、电量状态数据
    setSignalStatus() {
      const signalStatus = 'full';  // 例如 'full','medium', 'low'

      // 根据状态设置相应的图标样式或显示不同的图标
      if (signalStatus === 'full') {
        // 设置信号满格的样式
      } else if (signalStatus ==='medium') {
        // 设置信号中等的样式
      } else {
        // 设置信号低的样式
      }
    },
    list(){
      const id=JSON.parse(localStorage.getItem('login'));
      userPersonalUser(id).then(response => {
        console.log(response);
        this.form = response;
        localStorage.setItem('personalUser', JSON.stringify(response))
      });
    },
    goUserGuide(){
      this.$router.push("/userGuide")
    },
    goSettingsPage(){
      this.$router.push("/settingsPage")
    },
    goLicheng(){
      this.$router.push("/personalStatistics")
    },
    goAboutPage(){
      this.$router.push("/aboutPage")
    },
    gowithdrawCash(){
      this.$router.push("/withdrawCash")
    },
    gowithdrawalRecord(){
      this.$router.push("/withdrawalRecord")
    }
  },
  created() {
    this.list();
    this.updateTime();
    this.setSignalStatus();
  }
};
</script>

<style>
#top-status-bar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #4EA9CB;
  padding: 10px;
  color: #f0f0f0;
  font-weight: bolder;
  padding-top: 15px;
}
#top{
  height: 13rem;
  background-color: #4EA9CB;
  background-position : left;
}
#img{
  float:left;
  margin-top:58px;
  margin-left:35px;
}
#name{
  float: left;
  color: #f0f0f0;
  font-weight: bolder;
}
#name1{
  font-size:larger;
  width: 52px;
  margin-bottom:8px;
  margin-top:65px;
}
#name2{
  width: 37px;
  height: 22px;
  margin-left: 10px;
  font-size:small;
  background-color: #409EFF;
}
#name3{
  float: left;
  margin-left: 55px;
  margin-top: -25px;
  font-size:x-small;
  color: #B1BCC0;
}
#progress{
  width: 140px;
  padding-left: 30px;
  margin-top: -17px;
}
#bottom{
  height: 600px;
  background-color: #F7F7F7;
}
#bottom_top{
  float: left;
  width: 350px;
  height: 200px;
  background-color: #FFFFFF;
  border-radius: 7px 7px 7px 7px;
  margin-left: 22px;
  margin-top: -58px;
  text-align:left;
  border: 1px solid #DCDCDC;
}
#bottom_top_name1{
  margin-left: 35px;
  font-weight: bolder;
  font-size: medium;
  margin-top: 12px;
}
#bottom_top_name2{
  margin-left: 31px;
  font-weight: 40;
  font-size: 57px;
  margin-top: -15px;
  margin-bottom: 0;
}
#bottom_top_name3{
  float: left;
  width: 174px;
  border-right: 2px solid #7F7F7F;
  text-align:center;
  font-weight: bolder;
}
#bottom_top_name4{
  float: left;
  width: 174px;
  text-align:center;
  font-weight: bolder;
}
#money{
  font-size: 30px;
  font-weight: 30;
  margin: 0;
}
#spend{
  margin-bottom: 5px;
}
#bottom_top_name5{
  width: 100px;
  height: 28px;
  text-align:center;
  padding-top: 6px;
  font-weight: bolder;
  color: #FFFFFF;
  float: right;
  background-color: #FF9959;
  border-radius: 5px 5px 5px 5px;
  margin-top: -160px;
  margin-right: 15px;
}
#bottom_bottom{
  float: left;
  width: 350px;
  height: 100px;
  background-color: #FFFFFF;
  border-radius: 7px 7px 7px 7px;
  margin-left: 22px;
  margin-top: 20px;
  border: 1px solid #DCDCDC;
}
#bottom_xia{
  float: left;
  width: 378px;
  height: 246px;
  background-color: #FFFFFF;
  border-radius: 7px 7px 7px 7px;
  margin-left: 6px;
  margin-top: 20px;
}
</style>
